<!doctype html>

{% import 'render.html' as render %}

<html>
  <head>
    <meta charset="utf-8" />
    <title>{{p.information.first}} {{p.information.last}}</title>
    <style>
      {% include "style.css" %}
      {% include "bootstrap.css" %}
    </style>
  <link rel="stylesheet"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
      $(function() {
        $("#tabs").tabs();
        $("#x_pub_year").hide();
        $(".a_pub").click(function(e) {
          // enable the selected button
          $(".a_pub").removeClass("success");
          $(this).addClass("success");

          // reveal the selected publist
          var pub_list = $(this).attr("publist");
          $("div.publist").hide();
          $("#" + pub_list).fadeIn();
        });
      });
    </script>
  </head>

  <body>
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a href="#" class="brand">UOIT PAGE</a>
          <ul class="nav">
            {% for x in p.information.directories.split("/") %}
            <li><a href="#">{{x}}</a></li>
            <li><a href="#">&rsaquo;&rsaquo;</a></li>
            {% endfor %}
            <li><a href="#">
              {{p.information.first}} {{p.information.last}}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
        <h1 style="margin-top:60px"> 
        {{p.information.first}} {{p.information.last}},
        {{p.information.position}}
        </h1>

      <div id="tabs">
        <ul>
          <li><a href="#information">Home</a></li>
          <li><a href="#publications">Publications</a></li>
          <li><a href="#talks">Talks</a></li>
          <li><a href="#supervision">Supervision</a></li>
          <li><a href="#fundings">Funding</a></li>
          <li><a href="#teachings">Teaching</a></li>
        </ul>
        <div id="information">
          <div class="row">
            <div class="span4">
              {% if p.information.photourl %}
              <img src="{{p.information.photourl}}"
                   width="200px"
                   alt="{{p.last}}, {{p.first}}"></img>
              {% endif %}
            </div>

            <div class="span8">
              <table class="zebra-striped">
                <tr><td>Email</td><td>{{p.information.email|email}}</td></tr>
                <tr><td>Office</td><td>{{p.information.office}}</td></tr>
                <tr><td>Tel.</td><td>{{p.information.phone}}</td></tr>
                <tr>
                  <td>Address</td>
                  <td><pre>{{p.information.address}}</pre></td>
                </tr>
                <tr><td>Education</td><td>{{p.information.education}}</td></tr>
              </table>
            </div>
          </div>

          <div class="row">
            <div class="span6">
              <h3> Biography </h3>
              <p> {{p.information.biography}} </p>
            </div>

            <div class="span6">
              <h3> Research </h3>
              <p> {{p.information.research}} </p>
            </div>
          </div>
        </div>

        <div id="publications">
          <div class="row">
            <div class="span10 offset1">
              <a href="#" class="a_pub btn" id="a_type" publist="x_pub_type">
                By category
              </a>
              <a href="#" class="a_pub btn" id="a_year" publist="x_pub_year">
                By year
              </a>
            </div>
          </div>
          {% for pub_list in ['x_pub_year', 'x_pub_type'] %}
          <div class="row publist" id="{{pub_list}}">
            <div class="span10 offset1">
              {% for section, pubs in p[pub_list] %}
              <h3> {{section|title}} </h3>
              <ol>
                {% for x in pubs %}
                <li class="publication"> {{render.pub(x)}} </li>
                {% endfor %}
              </ol>
              {% endfor %}
            </div>
          </div>
          {% endfor %}
        </div>
        <div id="teachings">
          {% for sec, courses in p.x_courses %}
          <h3> {{sec|title}} </h3>
            <ul>
              {% for c in courses: %}
              <li class="course"> {{render.course(c)}} </li>
              {% endfor %}
            </ul>
          {% endfor %}
        </div>

        <div id="talks">
          <ul>
            {% for x in p.x_talks: %}
            <li class="talk"> {{render.talk(x)}} </li>
            {% endfor %}
          </ul>
        </div>
        
        <div id="supervision">
          {% for (status, type), list1 in p.x_supervision %}
            {% if list1 %}
            <h3> {{status|title}} {{type|title}} </h3>
            <table class="students">
              {% for x in list1 %}
              <tr> {{render.student(x)}} </tr>
              {% endfor %}
            </table>
            {% endif %}
            <hr/>
          {% endfor %}
        </div>

        <div id="fundings">
          {% for status, grants in p.x_fundings %}
            {% if grants %}
            <h3> {{status|title}} </h3>
            <ul>
              {% for x in grants %}
              <li class="grant"> {{render.grant(x)}} </li>
              {% endfor %}
            </ul>
            {% endif %}
          {% endfor %}
        </div>

      </div>

      <div class="row lastupdated">
        <div class="span10">
          Last updated:
          <span class="label success">{{p.updated|modifiedtime}}</span>
        </div>
      </div>
    </div> <!--end of container-->
  </body>
</html>
